<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>既往史记录表单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            font-size: 14px;
            line-height: 1.5;
            max-width: 750px;
            margin: 0 auto;
            padding: 10px;
        }
        
        .form-container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px;
            margin-bottom: 20px;
        }
        
        h1 {
            font-size: 18px;
            text-align: center;
            margin-bottom: 15px;
            color: #2c80ff;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }
        
        h2 {
            font-size: 16px;
            margin: 15px 0 10px;
            color: #333;
        }
        
        .section {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px dashed #eee;
        }
        
        .section-title {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-weight: bold;
            font-size: 16px;
        }
        
        .section-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background-color: #2c80ff;
            color: white;
            border-radius: 50%;
            margin-right: 8px;
            font-size: 14px;
        }
        
        .subsection {
            margin-left: 15px;
            margin-bottom: 15px;
        }
        
        .subsection-title {
            font-weight: 600;
            margin-bottom: 8px;
            color: #555;
        }
        
        .form-group {
            margin-bottom: 12px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        input[type="text"],
        input[type="number"],
        input[type="date"],
        select,
        textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            background-color: #fff;
        }
        
        input:focus,
        select:focus,
        textarea:focus {
            border-color: #2c80ff;
            outline: none;
        }
        
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 5px;
        }
        
        .checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
        }
        
        .checkbox-item input {
            margin-right: 6px;
        }
        
        .inline-input {
            display: inline-block;
            width: auto;
            margin: 0 5px;
        }
        
        .add-btn {
            background-color: #2c80ff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 15px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            margin-top: 10px;
        }
        
        .add-btn:hover {
            background-color: #1a6fe0;
        }
        
        .add-btn::before {
            content: "+";
            margin-right: 5px;
            font-weight: bold;
        }
        
        .remove-btn {
            background-color: #ff4757;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            margin-left: 10px;
        }
        
        .disease-item, .surgery-item, .allergy-item {
            background-color: #f9f9f9;
            padding: 12px;
            border-radius: 4px;
            margin-bottom: 10px;
            position: relative;
        }
        
        .submit-btn {
            background-color: #2c80ff;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 12px 20px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
        }
        
        .submit-btn:hover {
            background-color: #1a6fe0;
        }
        
        .allergy-highlight {
            color: #ff4757;
            font-weight: bold;
            border-left: 3px solid #ff4757;
            padding-left: 8px;
            margin: 10px 0;
        }
        
        .no-history {
            color: #888;
            font-style: italic;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h1>既往史记录表单</h1>
        <p style="text-align: center; margin-bottom: 15px; color: #666;">系统性回顾清单，确保全面无遗漏</p>
        
        <form id="past-history-form">
            <!-- 1. 慢性疾病史 -->
            <div class="section">
                <div class="section-title">
                    <span class="section-number">1</span>
                    <span>慢性疾病史</span>
                </div>
                
                <!-- 心血管系统 -->
                <div class="subsection">
                    <div class="subsection-title">心血管系统</div>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="hypertension" name="cardiovascular">
                            <label for="hypertension">高血压</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="chd" name="cardiovascular">
                            <label for="chd">冠心病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="heart-failure" name="cardiovascular">
                            <label for="heart-failure">心力衰竭</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="rheumatic-heart" name="cardiovascular">
                            <label for="rheumatic-heart">风心病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="cardiovascular-other" name="cardiovascular">
                            <label for="cardiovascular-other">其他</label>
                            <input type="text" id="cardiovascular-other-text" class="inline-input" style="display:none; width:150px;">
                        </div>
                    </div>
                    
                    <div id="cardiovascular-details" style="display:none;">
                        <div class="form-group">
                            <label for="cardiovascular-diagnosis">诊断详情</label>
                            <textarea id="cardiovascular-diagnosis" rows="3" placeholder="记录：病名、诊断时间、控制情况（如血压水平）、用药"></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- 内分泌系统 -->
                <div class="subsection">
                    <div class="subsection-title">内分泌系统</div>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="diabetes" name="endocrine">
                            <label for="diabetes">糖尿病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="thyroid" name="endocrine">
                            <label for="thyroid">甲状腺疾病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="adrenal" name="endocrine">
                            <label for="adrenal">肾上腺疾病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="endocrine-other" name="endocrine">
                            <label for="endocrine-other">其他</label>
                            <input type="text" id="endocrine-other-text" class="inline-input" style="display:none; width:150px;">
                        </div>
                    </div>
                    
                    <div id="endocrine-details" style="display:none;">
                        <div class="form-group">
                            <label for="endocrine-diagnosis">诊断详情</label>
                            <textarea id="endocrine-diagnosis" rows="3" placeholder="记录：病名、诊断时间、控制情况（如血糖、HbA1c水平）、用药/胰岛素类型"></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- 呼吸系统 -->
                <div class="subsection">
                    <div class="subsection-title">呼吸系统</div>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="asthma" name="respiratory">
                            <label for="asthma">哮喘</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="copd" name="respiratory">
                            <label for="copd">COPD</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="tuberculosis" name="respiratory">
                            <label for="tuberculosis">肺结核</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="bronchiectasis" name="respiratory">
                            <label for="bronchiectasis">支气管扩张</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="respiratory-other" name="respiratory">
                            <label for="respiratory-other">其他</label>
                            <input type="text" id="respiratory-other-text" class="inline-input" style="display:none; width:150px;">
                        </div>
                    </div>
                    
                    <div id="respiratory-details" style="display:none;">
                        <div class="form-group">
                            <label for="respiratory-diagnosis">诊断详情</label>
                            <textarea id="respiratory-diagnosis" rows="3" placeholder="记录：病名、病程、稳定期情况、急性发作频率、用药"></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- 消化系统 -->
                <div class="subsection">
                    <div class="subsection-title">消化系统</div>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="hepatitis" name="digestive">
                            <label for="hepatitis">肝炎</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="cirrhosis" name="digestive">
                            <label for="cirrhosis">肝硬化</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="ulcer" name="digestive">
                            <label for="ulcer">消化性溃疡</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="ibd" name="digestive">
                            <label for="ibd">炎症性肠病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="digestive-other" name="digestive">
                            <label for="digestive-other">其他</label>
                            <input type="text" id="digestive-other-text" class="inline-input" style="display:none; width:150px;">
                        </div>
                    </div>
                    
                    <div id="digestive-details" style="display:none;">
                        <div class="form-group">
                            <label for="digestive-diagnosis">诊断详情</label>
                            <textarea id="digestive-diagnosis" rows="3" placeholder="记录：病名、病程、治疗情况"></textarea>
                        </div>
                    </div>
                </div>
                
                <!-- 其他系统 -->
                <div class="subsection">
                    <div class="subsection-title">其他系统</div>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="renal" name="other-systems">
                            <label for="renal">肾脏疾病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="neurological" name="other-systems">
                            <label for="neurological">神经系统疾病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="hematological" name="other-systems">
                            <label for="hematological">血液系统疾病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="autoimmune" name="other-systems">
                            <label for="autoimmune">自身免疫病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="psychiatric" name="other-systems">
                            <label for="psychiatric">精神疾病</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="malignancy" name="other-systems">
                            <label for="malignancy">恶性肿瘤</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="other-systems-other" name="other-systems">
                            <label for="other-systems-other">其他</label>
                            <input type="text" id="other-systems-other-text" class="inline-input" style="display:none; width:150px;">
                        </div>
                    </div>
                    
                    <div id="other-systems-details" style="display:none;">
                        <div class="form-group">
                            <label for="other-systems-diagnosis">诊断详情</label>
                            <textarea id="other-systems-diagnosis" rows="3" placeholder="记录：病名、诊断时间、治疗史、目前状态（如'痊愈'、'缓解期'、'带瘤生存'）"></textarea>
                        </div>
                    </div>
                </div>
                
                <div class="no-history">
                    <input type="checkbox" id="no-chronic-disease">
                    <label for="no-chronic-disease">无慢性疾病史</label>
                </div>
            </div>
            
            <!-- 2. 外科情况 -->
            <div class="section">
                <div class="section-title">
                    <span class="section-number">2</span>
                    <span>外科情况</span>
                </div>
                
                <!-- 手术史 -->
                <div class="subsection">
                    <div class="subsection-title">手术史</div>
                    <div id="surgery-container">
                        <div class="surgery-item">
                            <div class="form-group">
                                <label for="surgery-name-1">手术名称</label>
                                <input type="text" id="surgery-name-1" placeholder="如：阑尾切除术">
                            </div>
                            
                            <div class="form-group">
                                <label for="surgery-date-1">手术日期</label>
                                <input type="date" id="surgery-date-1">
                            </div>
                            
                            <div class="form-group">
                                <label for="surgery-reason-1">手术原因</label>
                                <input type="text" id="surgery-reason-1" placeholder="如：急性阑尾炎">
                            </div>
                            
                            <div class="form-group">
                                <label for="surgery-hospital-1">施术医院</label>
                                <input type="text" id="surgery-hospital-1">
                            </div>
                            
                            <div class="form-group">
                                <label for="surgery-complications-1">有无并发症</label>
                                <textarea id="surgery-complications-1" rows="2" placeholder="如有，请描述"></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" class="add-btn" id="add-surgery">添加手术记录</button>
                </div>
                
                <!-- 外伤史 -->
                <div class="subsection">
                    <div class="subsection-title">外伤史</div>
                    <div id="trauma-container">
                        <div class="disease-item">
                            <div class="form-group">
                                <label for="trauma-type-1">外伤类型</label>
                                <input type="text" id="trauma-type-1" placeholder="如：左下肢骨折">
                            </div>
                            
                            <div class="form-group">
                                <label for="trauma-date-1">发生时间</label>
                                <input type="date" id="trauma-date-1">
                            </div>
                            
                            <div class="form-group">
                                <label for="trauma-treatment-1">处理方式</label>
                                <input type="text" id="trauma-treatment-1" placeholder="如：石膏固定">
                            </div>
                            
                            <div class="form-group">
                                <label for="trauma-sequelae-1">后遗症</label>
                                <input type="text" id="trauma-sequelae-1" placeholder="如：左下肢骨折后遗留跛行">
                            </div>
                        </div>
                    </div>
                    
                    <button type="button" class="add-btn" id="add-trauma">添加外伤记录</button>
                </div>
                
                <div class="no-history">
                    <input type="checkbox" id="no-surgical-history">
                    <label for="no-surgical-history">无外科情况</label>
                </div>
            </div>
            
            <!-- 3. 输血史 -->
            <div class="section">
                <div class="section-title">
                    <span class="section-number">3</span>
                    <span>输血史</span>
                </div>
                
                <div id="transfusion-container">
                    <div class="disease-item">
                        <div class="form-group">
                            <label for="transfusion-reason-1">输血原因</label>
                            <input type="text" id="transfusion-reason-1" placeholder="如：手术中失血">
                        </div>
                        
                        <div class="form-group">
                            <label for="transfusion-date-1">输血时间</label>
                            <input type="date" id="transfusion-date-1">
                        </div>
                        
                        <div class="form-group">
                            <label for="blood-type-1">血型</label>
                            <input type="text" id="blood-type-1" placeholder="如：A型Rh阳性">
                        </div>
                        
                        <div class="form-group">
                            <label for="transfusion-reaction-1">输血不良反应</label>
                            <textarea id="transfusion-reaction-1" rows="2" placeholder="如：发热、过敏等（如无，请填写'无'）"></textarea>
                        </div>
                    </div>
                </div>
                
                <button type="button" class="add-btn" id="add-transfusion">添加输血记录</button>
                
                <div class="no-history">
                    <input type="checkbox" id="no-transfusion-history">
                    <label for="no-transfusion-history">无输血史</label>
                </div>
            </div>
            
            <!-- 4. 过敏史 -->
            <div class="section">
                <div class="section-title">
                    <span class="section-number">4</span>
                    <span>过敏史</span>
                </div>
                
                <div class="allergy-highlight">【必须醒目标注，电子病历中常以红色或加粗字体提示】</div>
                
                <div id="allergy-container">
                    <div class="allergy-item">
                        <div class="form-group">
                            <label for="allergen-type-1">过敏原类型</label>
                            <select id="allergen-type-1">
                                <option value="">请选择</option>
                                <option value="药品">药品</option>
                                <option value="食物">食物</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="allergen-detail-1">具体过敏原</label>
                            <input type="text" id="allergen-detail-1" placeholder="如：青霉素、海鲜、花粉、造影剂">
                        </div>
                        
                        <div class="form-group">
                            <label for="allergy-reaction-1">过敏反应</label>
                            <textarea id="allergy-reaction-1" rows="2" placeholder="具体症状，如：全身皮疹、呼吸困难、过敏性休克"></textarea>
                        </div>
                    </div>
                </div>
                
                <button type="button" class="add-btn" id="add-allergy">添加过敏记录</button>
                
                <div class="no-history">
                    <input type="checkbox" id="no-allergy-history">
                    <label for="no-allergy-history">无过敏史</label>
                </div>
            </div>
            
            <div class="form-group">
                <div class="checkbox-item">
                    <input type="checkbox" id="confirm-info" required>
                    <label for="confirm-info">确认信息无误，提交记录</label>
                </div>
            </div>
            
            <button type="submit" class="submit-btn">提交记录</button>
        </form>
    </div>

    <script>
        // 动态显示/隐藏慢性疾病详情
        document.addEventListener('DOMContentLoaded', function() {
            // 心血管系统
            const cardiovascularCheckboxes = document.querySelectorAll('input[name="cardiovascular"]');
            cardiovascularCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const hasChecked = Array.from(cardiovascularCheckboxes).some(cb => cb.checked);
                    document.getElementById('cardiovascular-details').style.display = hasChecked ? 'block' : 'none';
                });
            });
            
            // 内分泌系统
            const endocrineCheckboxes = document.querySelectorAll('input[name="endocrine"]');
            endocrineCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const hasChecked = Array.from(endocrineCheckboxes).some(cb => cb.checked);
                    document.getElementById('endocrine-details').style.display = hasChecked ? 'block' : 'none';
                });
            });
            
            // 呼吸系统
            const respiratoryCheckboxes = document.querySelectorAll('input[name="respiratory"]');
            respiratoryCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const hasChecked = Array.from(respiratoryCheckboxes).some(cb => cb.checked);
                    document.getElementById('respiratory-details').style.display = hasChecked ? 'block' : 'none';
                });
            });
            
            // 消化系统
            const digestiveCheckboxes = document.querySelectorAll('input[name="digestive"]');
            digestiveCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const hasChecked = Array.from(digestiveCheckboxes).some(cb => cb.checked);
                    document.getElementById('digestive-details').style.display = hasChecked ? 'block' : 'none';
                });
            });
            
            // 其他系统
            const otherSystemsCheckboxes = document.querySelectorAll('input[name="other-systems"]');
            otherSystemsCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const hasChecked = Array.from(otherSystemsCheckboxes).some(cb => cb.checked);
                    document.getElementById('other-systems-details').style.display = hasChecked ? 'block' : 'none';
                });
            });
            
            // 其他选项输入框
            document.getElementById('cardiovascular-other').addEventListener('change', function() {
                document.getElementById('cardiovascular-other-text').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('endocrine-other').addEventListener('change', function() {
                document.getElementById('endocrine-other-text').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('respiratory-other').addEventListener('change', function() {
                document.getElementById('respiratory-other-text').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('digestive-other').addEventListener('change', function() {
                document.getElementById('digestive-other-text').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            document.getElementById('other-systems-other').addEventListener('change', function() {
                document.getElementById('other-systems-other-text').style.display = this.checked ? 'inline-block' : 'none';
            });
            
            // 无病史选项
            document.getElementById('no-chronic-disease').addEventListener('change', function() {
                if (this.checked) {
                    cardiovascularCheckboxes.forEach(cb => cb.checked = false);
                    endocrineCheckboxes.forEach(cb => cb.checked = false);
                    respiratoryCheckboxes.forEach(cb => cb.checked = false);
                    digestiveCheckboxes.forEach(cb => cb.checked = false);
                    otherSystemsCheckboxes.forEach(cb => cb.checked = false);
                    
                    document.getElementById('cardiovascular-details').style.display = 'none';
                    document.getElementById('endocrine-details').style.display = 'none';
                    document.getElementById('respiratory-details').style.display = 'none';
                    document.getElementById('digestive-details').style.display = 'none';
                    document.getElementById('other-systems-details').style.display = 'none';
                }
            });
            
            // 添加手术记录
            let surgeryCount = 1;
            document.getElementById('add-surgery').addEventListener('click', function() {
                surgeryCount++;
                const surgeryContainer = document.getElementById('surgery-container');
                const newSurgery = document.createElement('div');
                newSurgery.className = 'surgery-item';
                newSurgery.innerHTML = `
                    <button type="button" class="remove-btn" onclick="this.parentElement.remove()">删除</button>
                    <div class="form-group">
                        <label for="surgery-name-${surgeryCount}">手术名称</label>
                        <input type="text" id="surgery-name-${surgeryCount}" placeholder="如：阑尾切除术">
                    </div>
                    
                    <div class="form-group">
                        <label for="surgery-date-${surgeryCount}">手术日期</label>
                        <input type="date" id="surgery-date-${surgeryCount}">
                    </div>
                    
                    <div class="form-group">
                        <label for="surgery-reason-${surgeryCount}">手术原因</label>
                        <input type="text" id="surgery-reason-${surgeryCount}" placeholder="如：急性阑尾炎">
                    </div>
                    
                    <div class="form-group">
                        <label for="surgery-hospital-${surgeryCount}">施术医院</label>
                        <input type="text" id="surgery-hospital-${surgeryCount}">
                    </div>
                    
                    <div class="form-group">
                        <label for="surgery-complications-${surgeryCount}">有无并发症</label>
                        <textarea id="surgery-complications-${surgeryCount}" rows="2" placeholder="如有，请描述"></textarea>
                    </div>
                `;
                surgeryContainer.appendChild(newSurgery);
            });
            
            // 添加外伤记录
            let traumaCount = 1;
            document.getElementById('add-trauma').addEventListener('click', function() {
                traumaCount++;
                const traumaContainer = document.getElementById('trauma-container');
                const newTrauma = document.createElement('div');
                newTrauma.className = 'disease-item';
                newTrauma.innerHTML = `
                    <button type="button" class="remove-btn" onclick="this.parentElement.remove()">删除</button>
                    <div class="form-group">
                        <label for="trauma-type-${traumaCount}">外伤类型</label>
                        <input type="text" id="trauma-type-${traumaCount}" placeholder="如：左下肢骨折">
                    </div>
                    
                    <div class="form-group">
                        <label for="trauma-date-${traumaCount}">发生时间</label>
                        <input type="date" id="trauma-date-${traumaCount}">
                    </div>
                    
                    <div class="form-group">
                        <label for="trauma-treatment-${traumaCount}">处理方式</label>
                        <input type="text" id="trauma-treatment-${traumaCount}" placeholder="如：石膏固定">
                    </div>
                    
                    <div class="form-group">
                        <label for="trauma-sequelae-${traumaCount}">后遗症</label>
                        <input type="text" id="trauma-sequelae-${traumaCount}" placeholder="如：左下肢骨折后遗留跛行">
                    </div>
                `;
                traumaContainer.appendChild(newTrauma);
            });
            
            // 添加输血记录
            let transfusionCount = 1;
            document.getElementById('add-transfusion').addEventListener('click', function() {
                transfusionCount++;
                const transfusionContainer = document.getElementById('transfusion-container');
                const newTransfusion = document.createElement('div');
                newTransfusion.className = 'disease-item';
                newTransfusion.innerHTML = `
                    <button type="button" class="remove-btn" onclick="this.parentElement.remove()">删除</button>
                    <div class="form-group">
                        <label for="transfusion-reason-${transfusionCount}">输血原因</label>
                        <input type="text" id="transfusion-reason-${transfusionCount}" placeholder="如：手术中失血">
                    </div>
                    
                    <div class="form-group">
                        <label for="transfusion-date-${transfusionCount}">输血时间</label>
                        <input type="date" id="transfusion-date-${transfusionCount}">
                    </div>
                    
                    <div class="form-group">
                        <label for="blood-type-${transfusionCount}">血型</label>
                        <input type="text" id="blood-type-${transfusionCount}" placeholder="如：A型Rh阳性">
                    </div>
                    
                    <div class="form-group">
                        <label for="transfusion-reaction-${transfusionCount}">输血不良反应</label>
                        <textarea id="transfusion-reaction-${transfusionCount}" rows="2" placeholder="如：发热、过敏等（如无，请填写'无'）"></textarea>
                    </div>
                `;
                transfusionContainer.appendChild(newTransfusion);
            });
            
            // 添加过敏记录
            let allergyCount = 1;
            document.getElementById('add-allergy').addEventListener('click', function() {
                allergyCount++;
                const allergyContainer = document.getElementById('allergy-container');
                const newAllergy = document.createElement('div');
                newAllergy.className = 'allergy-item';
                newAllergy.innerHTML = `
                    <button type="button" class="remove-btn" onclick="this.parentElement.remove()">删除</button>
                    <div class="form-group">
                        <label for="allergen-type-${allergyCount}">过敏原类型</label>
                        <select id="allergen-type-${allergyCount}">
                            <option value="">请选择</option>
                            <option value="药品">药品</option>
                            <option value="食物">食物</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="allergen-detail-${allergyCount}">具体过敏原</label>
                        <input type="text" id="allergen-detail-${allergyCount}" placeholder="如：青霉素、海鲜、花粉、造影剂">
                    </div>
                    
                    <div class="form-group">
                        <label for="allergy-reaction-${allergyCount}">过敏反应</label>
                        <textarea id="allergy-reaction-${allergyCount}" rows="2" placeholder="具体症状，如：全身皮疹、呼吸困难、过敏性休克"></textarea>
                    </div>
                `;
                allergyContainer.appendChild(newAllergy);
            });
        });
        
        // 表单提交
        document.getElementById('past-history-form').addEventListener('submit', function(e) {
            e.preventDefault();
            alert('既往史记录提交成功！');
            // 在实际应用中，这里应该发送数据到服务器
        });
    </script>
</body>
</html>